<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MJPEG-Streamer</title>

    <style type="text/css">
    /* tab init */
    .tabcontent {
        display:none;
    }
    #control {
        font-size: 12px;
    }
    </style>

    <script language="javascript" type="text/javascript" src="/functions.js"></script>
    <script language="javascript">

    var pretab = "";
    function extendmenu(mid, aobject) {
        if(pretab != "") {
            document.getElementById(pretab).style.display = "none"
        }
        
        document.getElementById(mid).style.display = "block"
        pretab = mid
    }
    
      function send_command(cmd) {
        document.getElementById('hints').firstChild.nodeValue = "Send command: " + cmd;
        AJAX_get('/?action=command&command='+ cmd)
      }

      function AJAX_response(text) {
        document.getElementById('hints').firstChild.nodeValue = "Got response: " + text;
      }

      function KeyDown(ev) {
        ev = ev || window.event;
        pressed = ev.which || ev.keyCode;

        switch (pressed) {
          case 37:
              //send_command('pan_plus');
            break;
          case 39:
              //send_command('pan_minus');
            break;
          case 38:
              //send_command('tilt_minus');
            break;
          case 40:
              //send_command('tilt_plus');
            break;
          case 32:
              //send_command('reset_pan_tilt');
          break;
          default:
              break;
        }
      }

      document.onkeydown = KeyDown;

    </script>

</head>
<script type="text/javascript">

/* Copyright (C) 2007 Richard Atterer, richard짤atterer.net
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License, version 2. See the file
   COPYING for details. */

var imageNr = 0; // Serial number of current image
var finished = new Array(); // References to img objects which have finished downloading
var paused = false;

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "/?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

// Two layers are always present (except at the very beginning), to avoid flicker
function imageOnload() {
  this.style.zIndex = imageNr; // Image finished, bring to front!
  while (1 < finished.length) {
    var del = finished.shift(); // Delete old image(s) from document
    del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}

function imageOnclick() { // Clicking on the image will pause the stream
  paused = !paused;
  if (!paused) createImageLayer();
}

</script>
<body onload="createImageLayer();extendmenu('sc1', this);">

<div id="hints" style="background-color: yellow; position: absolute; top: 2px">communication hints</div>

<br>

<div id="webcam"><noscript><img src="/?action=snapshot" /></noscript></div>

<div id="control" style="position: absolute; top: 285px;">
    <form name="camera_panel" action="" onsubmit="return false;" style="background-color: navy; width: 304px; height: 90px; padding: 8px">
      <font color="WHITE">GAIN:  ( 0 ~ 255 )</font> <br>
      <input type="button" value="-1" onclick="send_command('gain_minus&value=1')">
      <input type="button" value="+1" onclick="send_command('gain_plus&value=1')">
      &nbsp;
      <input type="button" value="-10" onclick="send_command('gain_minus&value=10')">
      <input type="button" value="+10" onclick="send_command('gain_plus&value=10')">
      <br /><br />
    
      <font color="WHITE">EXPOSURE: ( 0 ~ 10000 )</font> <br>
      <input type="button" value="-1" onclick="send_command('exposure_minus&value=1')">
      <input type="button" value="+1" onclick="send_command('exposure_plus&value=1')">
      &nbsp;
      <input type="button" value="-10" onclick="send_command('exposure_minus&value=10')">
      <input type="button" value="+10" onclick="send_command('exposure_plus&value=10')">
      &nbsp;
      <input type="button" value="-100" onclick="send_command('exposure_minus&value=100')">
      <input type="button" value="+100" onclick="send_command('exposure_plus&value=100')">
    </form>
</div>

<div id="control" style="position: absolute; top: 6px; left: 345px;">

    <div id="sc1" class="tabcontent"  style="background-color: navy; width: 304px; height: 240px; padding: 8px">
        <form name="command_panel" action="" onsubmit="return false;">
          <font color="WHITE"><b>BALL</b> HUE: ( 0 ~ 360 )</font> <br>
          <input type="button" value="-1" onclick="send_command('hue_minus&value=1&section=ball')">
          <input type="button" value="+1" onclick="send_command('hue_plus&value=1&section=ball')">
          &nbsp;
          <input type="button" value="-10" onclick="send_command('hue_minus&value=10&section=ball')">
          <input type="button" value="+10" onclick="send_command('hue_plus&value=10&section=ball')">
          <br /><br />
          
          <font color="WHITE">TOLERANCE: ( 0 ~ 179 )</font> <br>
          <input type="button" value="-1" onclick="send_command('tolerance_minus&value=1&section=ball')">
          <input type="button" value="+1" onclick="send_command('tolerance_plus&value=1&section=ball')">
          &nbsp;
          <input type="button" value="-10" onclick="send_command('tolerance_minus&value=10&section=ball')">
          <input type="button" value="+10" onclick="send_command('tolerance_plus&value=10&section=ball')">
          <br /><br />
          
          <font color="WHITE">MIN SATURATION: ( 0 ~ 100 )</font> <br>
          <input type="button" value="-1" onclick="send_command('min_saturation_minus&value=1&section=ball')">
          <input type="button" value="+1" onclick="send_command('min_saturation_plus&value=1&section=ball')">
          &nbsp;
          <input type="button" value="-10" onclick="send_command('min_saturation_minus&value=10&section=ball')">
          <input type="button" value="+10" onclick="send_command('min_saturation_plus&value=10&section=ball')">
          <br /><br />
          
          <font color="WHITE">MIN VALUE: ( 0 ~ 100 )</font> <br>
          <input type="button" value="-1" onclick="send_command('min_value_minus&value=1&section=ball')">
          <input type="button" value="+1" onclick="send_command('min_value_plus&value=1&section=ball')">
          &nbsp;
          <input type="button" value="-10" onclick="send_command('min_value_minus&value=10&section=ball')">
          <input type="button" value="+10" onclick="send_command('min_value_plus&value=10&section=ball')">
        <br><br>

        <table width="300px"><tr align="center">
          <td width="160px"><input type="button" value="RELOAD" onclick="send_command('reload&section=ball')" style="width:100px; height:30px;"></td>
          <td width="160px"><input type="button" value="SAVE" onclick="send_command('save&section=ball')" style="width:100px; height:30px;"></td>
        </tr></table>
        </form>
    </div>

        <br><br>

</div>

</body>
</html>
